import React from 'react';
import {
    StyleSheet,
    View,
    Image,
    InteractionManager,
    Text,
} from 'react-native';
import Common from '../common/constants';
import {InputItem, WhiteSpace, WingBlank, Button, Toast} from 'antd-mobile';

import {getLoginInfo, login} from '../actions/logininfoAction';

import TabBarViewContainer from '../containers/TabBarViewContainer';
import RegisterPasswordContainer from '../containers/RegisterPasswordContainer';
import RegisterContainer from '../containers/RegisterContainer';


export default class Login extends React.Component{

    componentDidMount() {
        InteractionManager.runAfterInteractions(() => {
            const {dispatch} = this.props;
            dispatch(getLoginInfo('logininfo'));
            
            //dispatch(fetchFeeds(page, canLoadMore, isRefreshing, isLoading));
        });
    }

    componentDidUpdate() {
        console.log('componentDidUpdate');
        let { loginReducer } = this.props;
        console.log(this.props);
        if(loginReducer.login.errcode === 0){
            Toast.success('登录成功', 1);
            storage.save({
                key : 'userlogininfo',
                data : loginReducer.login.data,
                expires: null,
            });

            global.user.accessTicket = loginReducer.login.data.accessTicket;
            global.user.userId = loginReducer.login.data.userId;
            
            loginReducer.login = {};

            this.props.navigator.push({
                component: TabBarViewContainer,
                passProps : { 'index' : 3 },
            });
        }

        if(loginReducer.login.errcode === 9999){
            Toast.fail(loginReducer.login.errmsg, 1);
            loginReducer.login = {};
        }
    }

    _login() {

        if(this.props.loading){
            return ;
        }
        
        storage.save({
            key: 'logininfo',  // 注意:请不要在key中使用_下划线符号!
            data: { 
              'username': this.props.loginReducer.username,
              'password': this.props.loginReducer.password,
            },
            expires: null
        });

        const {dispatch} = this.props;
        dispatch(login(this.props.loginReducer.username, this.props.loginReducer.password));

    }

    _back() {
        //this.props.navigator.pop();
        this.props.navigator.push({
            component: TabBarViewContainer,
            passProps : { 'index' : 0 },
        });
    }

    _register() {
        this.props.navigator.push({
            component: RegisterContainer,
            title : '注册',
            leftButtonTitle : '< 我的',
            navigationBarHidden : false,
            onLeftButtonPress : () => this.props.navigator.pop()
        })
    }

    render(){

        let { loginReducer } = this.props;

        return (
            <View style={styles.main}>
                <InputItem
                    type="number"
                    placeholder="手机号"
                    clear={true}
                    autpFocus={true}
                    defaultValue={loginReducer.username}
                    onChange={(text) => {
                        loginReducer.username = text;
                    }}
                >用户名</InputItem>
                <InputItem
                    type="password"
                    clear={true}
                    defaultValue={loginReducer.password}
                    onChange={(text) => {
                        loginReducer.password = text;
                    }}
                >密码</InputItem>
                <WhiteSpace size="lg" />
                <WingBlank size="lg">
                    <Button className="btn" type="primary" 
                        loading={loginReducer.loading}
                        disabled={loginReducer.loading}
                        activeStyle={loginReducer.loading ? false : {}}
                        onClick={this._login.bind(this)}
                    >登录</Button>
                </WingBlank>
                <WhiteSpace size="lg" />
                <WingBlank size="lg">
                    <Button className="btn" 
                        onClick={this._register.bind(this)}
                    >注册</Button>
                </WingBlank>
                <WhiteSpace size="lg" />
                <WingBlank size="lg">
                    <Button className="btn" 
                        onClick={this._back.bind(this)}
                    >返回</Button>
                </WingBlank>
            </View>
        );
    }
}

const styles = StyleSheet.create({

    main : {
        marginTop : 20 + Common.window.height - 500,
        flexDirection: 'column', 
        alignContent : 'center',
    },

})